<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for遍历对象</title>
</head>
<body>
<div id="app">
  <!--1、v-for遍历对象的值value-->
  <ul>
    <li v-for="item in userInfo">{{item}}</li>
  </ul>

  <!--2、v-for遍历对象的属性名key和值value,格式：(value,key) in object-->
  <ul>
    <li v-for="(value,key) in userInfo">{{key}}：{{value}}</li>
  </ul>

  <!--3、v-for遍历对象的属性名key和值value以及索引下标index，格式：(value,key,index) in object-->
  <ul>
    <li v-for="(value,key,index) in userInfo">{{index}}、{{key}}：{{value}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      userInfo:{
        name:'张三',
        age:20,
        height:180
      }
    }
  });
</script>
</body>
</html>
